<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<html>
<head>
	<link href="${appName}/resource/js/jquery/plugin/loading/css/loading.css" rel="stylesheet">
	<link href="${appName}/resource/js/jquery/plugin/colresizable/css/main.css" rel="stylesheet">
	<script src="${appName}/resource/js/jquery/plugin/loading/CommonPerson.js"></script>
	<script src="${appName}/resource/js/jquery/plugin/colresizable/colResizable-1.6.min.js"></script>
<title>分页示例</title>
</head>
<style type="text/css">
	   	.center,.contents {text-align: center;}
	   	label,th,button,option,td,select,input{font-family: "微软雅黑";}
	   	.form-control {padding: 0px 12px;}
	   	td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: center; }
	   	a{cursor: hand;cursor: pointer;text-decoration:none;}
	   	.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	   	background-color: #fff;
		}
</style>
<script>
	function toResizeTable() {
		$("#normal").colResizable({disable:true});
		$("#normal").colResizable({liveDrag:true,draggingClass:"dragging",resizeMode:'fit',gripInnerHtml:"<div class='grip'></div>"});
	}
</script>
<body>	
  	
<div class="container" >
<button onclick="refresh('countriesList')">刷新</button>
<form  id="contentForm" method="POST" action="searchDemo4Page.do"></form>
		<!-- 3 局部刷新 -->
		<aa:zone name="countriesList">
		<table id="normal" class="table table-bordered table-striped" width="100%">
			<thead>
			  	<tr class="info">
			  		<th class="center">
		    			<label>
		    				<input type="checkbox" id="zcheckbox" onclick="selectAll()"/><span class="lbl"></span>
		    			</label>
			  		</th>
			  		<th class="center text-nowrap" >序号</th>
			  		<th class="center text-nowrap" >动画名称</th>
			  		<th class="center text-nowrap" >作者</th>
			  		<th class="center text-nowrap" >状态</th>
			  		<th class="center text-nowrap" >操作</th>
			  	</tr>
		 	</thead>
			<c:choose>
				<c:when test="${not empty pageInfo.list }">
					 <c:forEach var="item" items="${pageInfo.list }" varStatus="status">
						<tr>
						<td class='center' style="width: 30px;">
						<label><input type='checkbox' value="${item.id}" id=${item.id } name="selected" /><span class="lbl"></span></label>
						</td>
						<td style="width:50px;">${status.count+(pageInfo.pageNum-1)*pageInfo.pageSize}</td>
						<td style="width:400px;"><a onclick="update()" style="width:400px;display:block; float:left;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;" >${item.name}</a></td>
						<td style="width:150px;">${item.author}</td>
						<td id="status" style="width:100px;">
							<c:if test="${item.status=='1'}">上映</c:if>
							<c:if test="${item.status=='2'}">未上映</c:if>
						</td>
						<td style="width:80px;"><a onclick="update(${item.id})">查看</a></td>
						</tr>
					 </c:forEach>
				</c:when>
			<c:otherwise>
				<tr>
					<td colspan="6">没有相关数据</td>
				</tr>
			</c:otherwise> 
			</c:choose>
		</table>

			<!-- 4 定义局部刷新区域的id -->
			<input type="hidden" name="id_zone" value="countriesList" loading="true" successRun="toResizeTable">
			<!-- 5 定义局部刷新区域form的id -->
			<input type="hidden" name="id_form" value="contentForm">
			<%@ include file="/WEB-INF/jsp/frm/common/pageHelper.jsp" %>

		</aa:zone>
	</div><!--7  结束 -->
	
	<script type="text/javascript">
	
	 //复选框
	  function selectAll(){
		 var checklist = document.getElementsByName ("selected");
		   if(document.getElementById("zcheckbox").checked){
	  		   for(var i=0;i<checklist.length;i++){
	  		      checklist[i].checked = 1;
	  		   }
  	  	   }else{
		    	for(var j=0;j<checklist.length;j++){
				   checklist[j].checked = 0;
				}
		   }
	  } 
	</script>
</body>
</html>